<template>
  <div class="card-container">
    <van-cell title="会议状态">{{ detail.stateDesc }}</van-cell>
    <van-cell title="会议类型">{{
      detail.subShape == 1 ? "城市会" : "区域会"
    }}</van-cell>
    <van-cell title="会议主题">{{ detail.topic }}</van-cell>
    <van-cell title="开始时间">{{ detail.startTime }}</van-cell>
    <van-cell title="时长">{{ duration }}</van-cell>
    <van-cell title="会议海报">
      <van-button size="mini" icon="column" class="ml-2" @click="clickPoster()"
        >查看海报</van-button
      ></van-cell
    >
    <van-cell title="会议链接">
      {{ detail.shapeDesc }}
      <van-button
        size="mini"
        icon="column"
        class="ml-2"
        @click="copyMeetingCode(detail.meetingUrl)"
        >复制</van-button
      ></van-cell
    >
    <van-cell title=""></van-cell>
    <van-divider
      content-position="center"
      :style="{ color: '#1B40CD', borderColor: '#1B40CD', margin: 0 }"
    >
      参会人员
    </van-divider>
    <van-cell
      v-for="item in detail.schedules"
      :key="item.id"
      :title="item.speakers[0].speakerName"
      :label="item.speakers[0].title"
      is-link
      @click="clickSpeaker(item)"
      >{{ item.topic }}</van-cell
    >
    <van-cell title=""></van-cell>

    <van-divider
      content-position="center"
      :style="{ color: '#1B40CD', borderColor: '#1B40CD', margin: 0 }"
    >
      会议资料
    </van-divider>

    <van-collapse v-model="activeName">
      <van-collapse-item title="会议现场照片" name="1">
        <van-row>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
        </van-row>
      </van-collapse-item>
      <van-collapse-item title="线上截图" name="2">
        <van-row>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
        </van-row>
      </van-collapse-item>
      <van-collapse-item title="讲者照片" name="3">
        <van-row>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
        </van-row>
      </van-collapse-item>
      <van-collapse-item title="日程表" name="2">
        <van-row>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
        </van-row>
      </van-collapse-item>
      <van-collapse-item title="会议签到表" name="3">
        <van-row>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
          <van-col span="8">
            <van-image
              width="100"
              height="100"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          /></van-col>
        </van-row>
      </van-collapse-item>
    </van-collapse>
    <van-cell title=""></van-cell>

    <van-divider
      content-position="center"
      :style="{ color: '#1B40CD', borderColor: '#1B40CD', margin: 0 }"
    >
      会议创建信息
    </van-divider>
    <van-cell title="会议申请">{{ detail.createUserName }}</van-cell>
    <van-cell title="创建时间">{{ "-------" }}</van-cell>
    <van-cell title="会议审批">{{ "-------" }}</van-cell>
    <van-cell title="审批时间">{{ "-------" }}</van-cell>
    <van-cell title="会议核销">{{ "-------" }}</van-cell>
    <van-cell title="核销时间">{{ "-------" }}</van-cell>
    <van-cell title=""></van-cell>

    <van-divider
      content-position="center"
      :style="{ color: '#1B40CD', borderColor: '#1B40CD', margin: 0 }"
    >
      会议详细信息
    </van-divider>
    <van-cell title="会议号">{{ "-------" }}</van-cell>
    <van-cell title="密码"
      >{{ "-------"
      }}<van-button
        size="mini"
        icon="column"
        class="ml-2"
        @click="copyMeetingCode(detail.meetingUrl)"
        >复制</van-button
      ></van-cell
    >
    <van-cell title="主持人链接">{{ "-------" }}</van-cell>
    <van-cell title="主持人秘钥"
      >{{ "-------"
      }}<van-button
        size="mini"
        icon="column"
        class="ml-2"
        @click="copyMeetingCode(detail.meetingUrl)"
        >复制</van-button
      ></van-cell
    >
    <van-cell title=""></van-cell>
    <van-divider
      content-position="center"
      :style="{ color: '#1B40CD', borderColor: '#1B40CD', margin: 0 }"
    >
      会议数据统计
    </van-divider>
    <van-cell-group title="会议统计">
      <van-cell title="计划开始时间">{{ detail.createUserName }}</van-cell>
      <van-cell title="会议计划时长">{{ "-------" }}</van-cell>
      <van-cell title="实际开始时间">{{ "-------" }}</van-cell>
      <van-cell title="会议实际时长">{{ "-------" }}</van-cell>
      <van-cell title="会议总时长">{{ "-------" }}</van-cell>
      <van-cell title="实际结束时间">{{ "-------" }}</van-cell>
      <van-cell title="实际参会人数" is-link @click="clickAttendList"
        >{{ "-------"
        }}<van-icon
          @click.stop="
            showDialog({ message: '重复进入会议参会者也会计入参会总人数' })
          "
          name="question-o"
      /></van-cell>
      <van-cell title="云录制文件">{{ "-------" }}</van-cell>
    </van-cell-group>
    <van-cell title=""></van-cell>

    <van-cell-group title="直播统计">
      <van-cell title="观看量">{{ detail.createUserName }}</van-cell>
      <van-cell title="用户量">{{ "-------" }}</van-cell>
      <van-cell title="直播时长"
        >{{ "-------"
        }}<van-icon
          @click.stop="showDialog({ message: '活动的累计推流时间' })"
          name="question-o"
      /></van-cell>
      <van-cell title="平均观看时长"
        >{{ "-------"
        }}<van-icon
          @click.stop="
            showDialog({ message: '所有用户的平均观看时长（包含匿名用户）' })
          "
          name="question-o"
      /></van-cell>
      <van-cell title="最高在线人数">{{ "-------" }}</van-cell>
      <van-cell title="观看明细" is-link @click="clickWatchList"
        ><van-icon
          @click.stop="
            showDialog({
              message:
                '观看时长小于1分钟的访问，有概率无法获取，数据生成有一定延迟，一般不超过 24 小时',
            })
          "
          name="question-o"
      /></van-cell>
    </van-cell-group>
    <van-cell title=""></van-cell>

    <!-- 参会人员详情弹出 -->
    <van-dialog v-model:show="showSpeakerVisiable" title="讲者信息">
      <van-cell title="讲者姓名">{{
        selectSpeaker.speakers[0]?.speakerName
      }}</van-cell>
      <van-cell title="省市">
        {{ selectSpeaker.speakers[0]?.province
        }}{{ selectSpeaker.speakers[0]?.city }}
      </van-cell>
      <van-cell title="医院">{{
        selectSpeaker.speakers[0]?.speakerName
      }}</van-cell>
      <van-cell title="科室">{{
        selectSpeaker.speakers[0]?.department
      }}</van-cell>
      <van-cell title="职称">{{ selectSpeaker.speakers[0]?.title }}</van-cell>
      <van-cell title="手机号">{{ selectSpeaker.speakers[0]?.phone }}</van-cell>
      <van-cell title="讲课题目">{{ selectSpeaker.topic }}</van-cell>
      <van-cell title="讲课时间"
        >{{ selectSpeaker.startTime }}-{{ selectSpeaker.endTime }}</van-cell
      >
      <van-cell title="讲课金额"
        >{{ selectSpeaker.speakers[0]?.speakerAppearanceFeePretax }}元</van-cell
      >
      <van-cell title="协议签署">{{ "---------" }}</van-cell>
    </van-dialog>
    <!-- 海报弹出 -->
    <van-action-sheet
      v-model:show="poster.visible"
      title="长按保存图片"
      @close="clickClosePoster"
    >
      <img style="max-width: 100%; vertical-align: middle" :src="poster.url" />
    </van-action-sheet>
  </div>
</template>
<script setup>
import { computed, inject, ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import useClipboard from "vue-clipboard3";
import moment from "moment";
import {
  showToast,
  showSuccessToast,
  showNotify,
  showConfirmDialog,
  showDialog,
  Tag,
} from "vant";
import useUtils from "@/hooks/useUtils";

const api = inject("api");
const route = useRoute();
const router = useRouter();
const { toClipboard } = useClipboard();
const detail = ref({});
const showSpeakerVisiable = ref(false);
const selectSpeaker = ref({});
const activeName = ref([]);
const poster = reactive({
  visible: false,
  url: "",
});
const duration = computed(() => {
  const min = detail.value?.timeHours * 60 + detail.value?.timeMin;
  return `${min}分钟`;
});

//查看海报
async function clickPoster() {
  const { data } = await api.generatePoster(route.params.id);

  // if (!data) {
  //   showToast("海报正在生成中...");
  //   return;
  // }
  poster.url = `//projectimg-1256680128.cos.ap-beijing.myqcloud.com/poster/mt1772617178971705345.png`;
  poster.visible = true;
  // router.push(`/poster/${item.value.id}`)
}

//参会人员点击
const clickSpeaker = (item) => {
  selectSpeaker.value = item;
  showSpeakerVisiable.value = true;
};

// 点击复制
const copyMeetingCode = async (item) => {
  try {
    await toClipboard(item);
    showSuccessToast("复制成功");
  } catch (err) {
    showToast("复制失败");
  }
};
//参会人员列表
const clickAttendList = () => {
  router.push({
    path: `/vol/attendance-list`,
    query: {
      id: route.params.id,
    },
  });
};
//观看明细
const clickWatchList = () => {
  router.push({
    path: `/vol/watch-detail-list`,
    query: {
      id: route.params.id,
    },
  });
};
// 查看拒绝原因
const showReason = (because) =>
  showDialog({ title: "拒绝原因", message: because });

const getMeetingDetail = async () => {
  const { data } = await api.getMeetingDetailById(route.params.id);
  detail.value = data;
};

onMounted(() => {
  getMeetingDetail();
});
</script>
